<!doctype html>
<html>
@include('top.title')
<body>
@include('top.header')
@if(!empty(session('success')))
    <div id="tishi"
         style="background-color: #caeaca;position:absolute; margin:840px 2px 4px 1580px;width:300px;height: 24px;padding:10px;border-radius: 50px;">
        <span style="text-align: center;display:block;"> 提示信息：{{session('success')}}</span>
    </div>
@endif
<div class="mainContent">
    @include('top.menu')
    <form id="form" action="/photos" method="post" enctype="multipart/form-data">
        {{ csrf_field() }}
        <select class="leixing" name="type" id="">
            @foreach($list as $k=>$v)
                <option value="{{$v['type_id']}}">{{$v['name']}}</option>
            @endforeach
        </select>
        <button type="submit" class="shangchuang" style="float: right">上传</button>
        <br/>
        <div style="text-align:center;">
            <input class="xuanze" type="file" id="xdaTanFileImg" multiple="multiple" name="file[]" onchange="xmTanUploadImg(this)"/>
        </div>
        <div class="img-box" id="imgboxid">
        </div>
        <div id="xmTanDiv"></div>
    </form>
</div>
@include('top.footer')
</body>
</html>
<script type="text/javascript">
    //选择图片，马上预览
    function xmTanUploadImg(obj) {
        var fl = obj.files.length;
        for (var i = 0; i < fl; i++) {
            var file = obj.files[i];
            var reader = new FileReader();
            //读取文件过程方法
            reader.onloadstart = function (e) {
                console.log("开始读取....");
            }
            reader.onprogress = function (e) {
                console.log("正在读取中....");
            }
            reader.onabort = function (e) {
                console.log("中断读取....");
            }
            reader.onerror = function (e) {
                console.log("读取异常....");
            }
            reader.onload = function (e) {
                console.log("成功读取....");
                var imgstr = '<img style="width:100px;height:100px;" src="' + e.target.result + '"/>';
                var oimgbox = document.getElementById("imgboxid");
                var ndiv = document.createElement("div");
                ndiv.innerHTML = imgstr;
                ndiv.className = "img-div";
                oimgbox.appendChild(ndiv);
            }
            reader.readAsDataURL(file);
        }
    }
</script>